<template>
  <div class="tabbar">
    <van-tabbar v-model="tabbarIndex" active-color="#eb4450" @change="onChange">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart" :info="info">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/user">用户</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabbarIndex: 0,
      info: ''
    }
  },
  methods: {
    onChange(index) {
      this.$store.state.tabbarIndex = index
    }
  },
  created() {
    // 读取保存的index
    const cart = JSON.parse(localStorage.getItem('cart')) || []
    this.info = cart.length
    this.tabbarIndex = this.$store.state.tabbarIndex
  }
}
</script>
<style lang='less' scoped>
</style>
